import React from 'react'
import {Table} from 'antd'
import styles from './index.less'

export default class MusicList extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      list: this.format(props.list)
    };
    this.columns = [{
        title: '歌名',
        dataIndex: 'name',
        key: 'name',
      }, {
        title: '歌手',
        dataIndex: 'songer',
        key: 'songer',
      },
      {
        title: '专辑',
        dataIndex: 'belong',
        key: 'belong',
      }, {
        title: '点歌人',
        dataIndex: 'create',
        key: 'create',
      }
    ];
  }

  render() {
    return (
      <div className={styles.container}>
        <h5>播放列表</h5>
        <Table 
        pagination={false}
        columns={this.columns}
        dataSource={this.state.list}
        />
      </div>
    );
  }

  componentWillReceiveProps(next) {
    if (next.list.length !== this.state.list.length) {
      this.setState({
        list: this.format(next.list)
      });
    }
  }

  format(list) {
    return list.map((l, i) => {
      return {
        key: i,
        name: l.name,
        songer: l.songerName,
        belong: l.album,
        create: l.adder
      };
    });
  }

}